<template>
 <Transition name='add'>

  <div v-show="value" class="messagebox" :style="style[type]"  >

<span >
{{text}}
</span>
  </div>

 </Transition>
</template>

<script>
import { onMounted, ref } from 'vue-demi'
export default {
  name: 'cs',
  props: {
    text: {
      type: String,
      default: 'warn'
    },
    type: {
      type: String,
      default: 'warn'

    }
  },
  setup () {
    const style = {
      error: {
        color: 'red',
        backgroundColor: 'rgb(196, 66, 66)',
        borderColor: 'rgb(250, 236, 216)'
      },
      warn: {
        color: '#E6A23C',
        backgroundColor: 'rgb(253, 246, 236)',
        borderColor: 'rgb(250, 236, 216)'
      },
      success: {
        backgroundColor: 'red',

        color: '#67C23A',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
    const value = ref(false)
    onMounted(() => {
      value.value = true
    })
    return {
      style, value
    }
  }
}
</script>

<style lang="less">
.messagebox{
  position: fixed;

     z-index: 9999;
  left: 50%;
    width: 300px;
  height: 50px;
  padding: 0 25px;
  top: 25px;
border: 1px solid #000;
border-radius: 10px;
text-align: center;
line-height: 50px;

}
.add{

   &-enter {
   &-from {
     transform: translate3d(0,-75px,0);
     opacity: 0;
   }
   &-active {
     transition: all 0.5s;
   }
   &-to {
     transform: none;
     opacity: 1;
   }
 }
}
</style>
